<template>
	<div class="hy-container">
		<HyTable
			:searchFields="searchFields"
			:searchConfig="searchConfig"
			:searchDefault="searchDefault"
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			ref="hyTableRef"
		>
			<template #statusSlot="{ row }">
				<el-tag :class="setColor(row.dataModifyStatus)">{{ row.dataModifyStatusName }}</el-tag>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="{ row }">
						<el-button class="mr-5" text type="primary" icon="View" @click="handleView(row)">查看</el-button>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
</template>

<script lang="ts" setup>
import HyTable from '/@/components/HyTable/index.vue';
import { useDict } from '/@/hooks/dict';
import { fileEditPageListApi } from '/@/api/fileEdit';

const { data_modify_status } = useDict('data_modify_status');

const tableColumns = computed(() => {
	return [
		{ prop: 'appCode', label: '应用编号' },
		{ prop: 'appName', label: '应用名称' },
		{ prop: 'businessTypeName', label: '类型' },
		{ prop: 'applyReason', label: '修改理由' },
		{ prop: 'applyTime', label: '申报时间' },
		{ prop: 'dataModifyStatusName', label: '状态', slot: 'statusSlot' },
	];
});
const tableConfig = computed(() => {
	return {
		request: fileEditPageListApi,
	};
});
// 配置搜索
const searchFields = computed(() => {
	return {
		keyWords: {
			type: 'input',
			label: '关键字',
		},
		dataModifyStatus: {
			type: 'select',
			label: '状态',
			options: data_modify_status.value,
		},
		timeArray: {
			type: 'date',
			span: 7,
			picker: 'datetimerange',
			label: '创建时间',
		},
	};
});
const searchConfig = computed(() => {
	return {
		labelWidth: '120px',
		type: 'search',
		title: '资料修改申请',
		show: true,
	};
});
const searchDefault = ref({});
//操作
const router = useRouter();
const handleView = (row: any) => {
	router.push({
		path: '/fileEdit/detail',
		query: {
			processInstanceId: row.processInstanceId,
			businessType: row.businessType,
			dataModifyId: row.dataModifyId,
		},
	});
};
const setColor = (type: string) => {
	switch (type) {
		case '1':
			return 'wait-tag';
		case '2':
			return 'agree-tag';
		case '3':
			return 'refuse-tag';
		default:
			break;
	}
};
</script>
<style scoped lang="scss"></style>
